<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>写封信吧</title>
	<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet">
	<style>

		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			border: 0;
		}

		body {
			background-color: #f7f0f9;
		}

		.close {
			position: absolute;
			float: right;
			top: 30px;
			right: 30px;
			font-size: 50px;
			transition: transform 1s;
		}

		.close:hover {
			transform: rotate(270deg);
		}

		.box {
			top: 5vh;
			position: absolute;
			color: #668b3ba3;
			height: 80vh;
			width: 90vw;
			left: -100vw;
			z-index: 1;
			transition: left 3s;
			opacity: 1;
			box-shadow: 6px 12px 27px #847f7f;
		}

		.show {
			background: #f7f6de;
			text-align: center;
			font-size: 40px;
			font-weight: bold;
			color: #668b3ba3;
			height: 80vh;
			width: 90vw;
			overflow: scroll;
		}

		.el-base {
			position: absolute;
			top: 40%;
			left: 50%;
			width: 80vw;
			background: #eac353;
			border-radius: 15px;
			transform: translateX(-50%) translateY(-50%);
			box-shadow: 1px 2px 10px 12px #464344;
			text-align: center;
		}

		.el-inner-space {
			border-radius: 15px;
			border-top: solid 20vw transparent;
			border-right: solid 40vw #f7f6de;
			border-bottom: solid 20vw #f7f6de;
			border-left: solid 40vw #f7f6de;
			height: 0;
			width: 0;

		}

		.el-flap {
			position: absolute;
			border-radius: 15px;
			top: 0;
			left: 0;
			border-top: solid 20vw cornflowerblue;
			border-right: solid 40vw transparent;
			border-bottom: solid 20vw transparent;
			border-left: solid 40vw transparent;
			height: 0;
			width: 0;
			animation: el-open 2.5s;
		}

		.open {
			width: 200px;
			height: 200px;
			font-size: 60px;
			font-weight: bold;
			transform: translateX(-50%);
			display: block;
			text-align: center;
		}

		@keyframes el-open {
			0% {
				border-top: solid 20vw #3292e0;
				transform: rotateX(0deg);
				transform-origin: center top;
			}
			100% {
				border-top: solid 20vw #fad662;
				transform: rotateX(180deg);
				transform-origin: center top;
			}
		}

		.music {
			color: rebeccapurple;
			font-size: 70px;
			position: absolute;
			text-align: center;
			float: right;
			right: 30px;
			top: 50px;
			animation: rotate 4s linear infinite;
		}

		.music2 {
			color: #000000;
			font-size: 70px;
			position: absolute;
			text-align: center;
			float: right;
			right: 30px;
			top: 50px;

		}

		@keyframes rotate {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}

		.text {
			position: absolute;
			border-radius: 20px;
			width: 90vw;
			height: 50vh;
			top: 25vh;
			left: 5vw;
			line-height: 60px;
			font-size: 40px;
			background: cornflowerblue;
			box-shadow: 0px 27px 24px -15px #adb7c5;
			font-weight: bold;
			color: white;
			text-align: center;

		}
	</style>
</head>
<body id="body">
<audio src="https://music.163.com/song/media/outer/url?id=423118698.mp3" id="audio" controls="controls" loop="true"
	   hidden="true">
</audio>
<div class="music" id="pause" onclick="paused()"><i class="fa fa-music" aria-hidden="true">
</i></div>
<div class="music2" id="play" style="display: none" onclick="playd()"><i class="fa fa-music">
</i></div>
<div class="box" id="box">
	<div id="showStr" class="show">
	</div>
	<span class="close" onclick="quit()"> <i class="fa fa-times" aria-hidden="true"></i> </span>
</div>
<div style="display:none" id="string" class="text">
	从小我就懂得保护自己，
	我知道要想不被人拒绝，
	最好的办法就是先拒绝别人。
	----
	从什么时候开始，
	在什么东西上面都有个日期，
	秋刀鱼会过期，
	肉罐头会过期，
	连保鲜纸都会过期，
	我开始怀疑，
	在这个世界上，
	还有什么东西是不会过期的
	----
	虽然我很喜欢她，
	但始终没有告诉她。
	因为我知道得不到的东西永远是最好的
	----
	我曾经听人说过，
	当你不可以再拥有的时候。
	你唯一可以做的，
	就是让自己不要忘记。
	----
	其实要过那条马路并不难。
	就看谁在对面等你。
	----
	我终于来到瀑布，
	我突然想起何宝荣，
	我觉得好难过，
	我始终认为站在这儿的应该是两个人。
	----
</div>
<div class="el-base" id="mail">
	<div class="el-inner-space">
		<div class="el-flap"></div>
		<div class="open" onclick="f()"><i class="fa fa-angle-double-up" aria-hidden="true"></i><br>
			开 启
		</div>
	</div>
</div>
<script>
	const width_ = window.screen.width;
	const body = document.getElementById('body'),
			mail = document.getElementById('mail');
	var show = document.getElementById('box'),
			pause_ = document.getElementById('pause'),
			play_ = document.getElementById('play');
	const audio = document.getElementById('audio'),
			str_ = document.getElementById('string');
	console.log(body);

	function f() {
		audio.play();
		let timer = null;
		let index = 0;
		let str = str_.innerHTML;
		show.style.left = width_ * 0.05 + 'px';
		body.removeChild(mail);
		setTimeout(function () {
			function type() {
				if (index == str.length) {
					clearInterval(timer)
				}
				document.getElementById("showStr").innerText = str.substring(0, index++) + "_";
			}

			timer = setInterval(type, 200);
		}, 4000);
		//通过定时器来让文字逐步显示
	}

	function quit() {
		var op = 1;

		function out() {
			if (show.style.opacity < 0) {
				body.removeChild(show);
				clearInterval(timer);
				str_.style.display = ''
			} else {
				show.style.opacity = op;
				op -= 0.1;
			}
		}

		timer = setInterval(out, 100)
	}

	function paused() {
		if (!audio.pause()) {
			audio.pause()
		}
		pause_.style.display = 'none';
		play_.style.display = '';
	}

	function playd() {
		if (!audio.play()) {
			audio.play()
		}
		pause_.style.display = '';
		play_.style.display = 'none';
	}
</script>
</body>
</html>
